import * as vscode from 'vscode';

import * as Path from 'path';

import * as Fs from 'fs';
import { log } from 'console';
import { mkdirsSync } from '../utils';
const pluginName = 'hello-plugin';

const dstFormToolView = function (context: vscode.ExtensionContext) {
  // 创建webview
  return vscode.commands.registerCommand('hello.webFormGen', function (uri) {

    const panel = vscode.window.createWebviewPanel(
      'form', //该webview的标识，任意字符串
      "表单页", // webview面板的标题，会展示给用户
      vscode.ViewColumn.One, // webview面板所在的分栏,显示在编辑器的哪个部位
      {
        enableScripts: true, // 启用JS，默认禁用
        retainContextWhenHidden: true, // webview被隐藏时保持状态，避免被重置
      }
    );
    // 读取html 
    const pathToHtml = vscode.Uri.file(
      Path.join(context.extensionPath, 'views', 'formGen/index.html')
    );
    /******** 资源路径 start ******/
    const srcPathUri = vscode.Uri.file(Path.join(context.extensionPath, 'views', 'formGen'));
    const baseUri = panel.webview.asWebviewUri(srcPathUri);
    // 出于安全考虑，Webview默认无法直接访问本地资源，它在一个孤立的上下文中运行，想要加载本地图片、js、css等必须通过特殊的vscode-resource:协议，网页里面所有的静态资源都要转换成这种格式，否则无法被正常加载。
    // vscode-resource:协议类似于file:协议，但它只允许访问特定的本地文件。和file:一样，vscode-resource:从磁盘加载绝对路径的资源。
    const pathUri = pathToHtml.with({ scheme: 'vscode-resource' });
    var indexHtml = Fs.readFileSync(pathUri.fsPath, 'utf8');
    indexHtml = indexHtml.replace('<base href="/">', `<base href="${String(baseUri)}/">`);
    // console.log(indexHtml, 111114444);
    panel.webview.html = indexHtml;
    /******** 资源路径 end ******/
    // 接收消息
    panel.webview.onDidReceiveMessage(message => {
      console.log('插件收到的消息：', message);
      if (message.cmd) {
        // cmd表示要执行的方法名称
        messageHandler.command(message.cmd, message);
      } else {
        messageHandler.log(`未找到名为 ${message.cmd} 的方法!`);
      }

    }, undefined, context.subscriptions);

  });
};
// directive指令
const exportFile = function (context: vscode.ExtensionContext) {
  // 生成文件
  return vscode.commands.registerCommand('hello.exportFile', (params) => {

    const { folderOrFile, dir, fileName, dataArrFile, vueFile } = params;
    try {
      const rootPath = vscode.workspace.rootPath || ''; // 相对当前vscode里所开的文件的根目录？？
      if (folderOrFile * 1 === 2) {
        const path = Path.join(rootPath, dir, fileName);
        // 选择生成一个文件
        Fs.writeFileSync(path, `${dataArrFile}`);
        vscode.window.showInformationMessage(`生成成功${path}`);
      } else {
        // 生成一个文件夹
        // 这里的路径相对插件执行时的路径，注意不是开发时是打包后。的extension.json？？？？
        const path = dir + '/addEditDetailDst';
        const path2 = dir + '/addEditDetailDst/functions';
        mkdirsSync(path2);
        console.log(222222222);
        Fs.writeFileSync(Path.join(rootPath, path, '/index.vue'), `${vueFile}`);
        Fs.writeFileSync(Path.join(rootPath, path2, '/data.js'), `${dataArrFile}`);
        vscode.window.showInformationMessage(`生成成功${path2}`);
      }
    } catch (e) {
      console.log(e);
      vscode.window.showInformationMessage(`生成失败 ${e}`);
    }
  });
};
export default function (context: vscode.ExtensionContext) {
  return [
    dstFormToolView(context),
    dstFormToolView(context)
  ];
}

const messageHandler = {
  command(commandName: string, message: any) {
    vscode.commands.executeCommand(`hello.${commandName}`, message.params);
    // 'hello.helloWorld';
  },
  log(msg: string) {
    vscode.window.showInformationMessage(`${msg} !`);
  }
};

